<template>
  <div v-if="order" class="member-order-detail">
    <XtxButton size="mini" type="gray" @click="$router.back()">
      <i class="iconfont icon-angle-left"></i>返回
    </XtxButton>
    <!-- 头部 实现数据商品绑定 -->
    <DetailAction v-model:order="order"></DetailAction>

    <!-- step进度条组件 -->
    <!-- 当order.endTime 和 order.evaluationTime值发生了变化需要重新熏染组件 -->
    <DetailStep :key="order.endTime || order.evaluationTime"
                :order="order"></DetailStep>

    <!-- 物流栏 -->
    <DetailLogistics v-if="[3,4,5].includes(order.orderState)" :order="order"></DetailLogistics>

    <!-- 订单商品信息 -->
    <DetailInfo :order="order"></DetailInfo>
  </div>
</template>

<script>
// 订单详情组件
import DetailAction from '@/components/member/DetailAction'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import API from '@/api/order'
import DetailStep from '@/components/member/DetailStep'
import DetailLogistics from '@/components/member/DetailLogistics'
import DetailInfo from '@/components/member/DetailInfo'

export default {
  name: 'detail',
  components: {
    DetailInfo,
    DetailLogistics,
    DetailStep,
    DetailAction
  },
  setup() {
    const route = useRoute()
    const order = ref(null)

    API.getOrderDetail(route.params.id)
        .then((res) => {
          order.value = res.result
        })

    return {
      order
    }
  }
}
</script>

<style lang="less" scoped>
.member-order-detail {
  background: #fff;
  // 高度继承 MemberLayout组件中 article 盒子宽度
  height: 100%;

  .xtx-button {
    position: absolute;
    top: 10px;
    left: 10px;

    i {
      font-size: 14px
    }
  }
}
</style>
